<template>
  <div class="loader">
    <div class="loading">Loading</div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.loader {
  width: 100%;
  height: 100%;
  min-height: 250px;
  padding-top: 100px;
  background-image: radial-gradient(ellipse at center, #242424, #555);
}
.loading {
  margin: auto;
  font-size: 15px;
  color: #fff;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  text-indent: -1.4em;
  animation: load-effect 2s infinite linear;
}

@keyframes load-effect {
  0% {
    box-shadow: 0 -3em 0 0.2em #fff, 2em -2em 0 0 #fff,
      /*右上*/ 3em 0 0 -0.5em #fff, /*右*/ 2em 2em 0 -0.5em #fff,
      /*右下*/ 0 3em 0 -0.5em #fff, /*下*/ -2em 2em 0 -0.5em #fff,
      /*左下*/ -3em 0 0 -0.5em #fff, /*左*/ -2em -2em 0 0 #fff; /*左上*/
  }
  12.5% {
    box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 0.2em #fff, 3em 0 0 0 #fff,
      2em 2em 0 -0.5em #fff, 0 3em 0 -0.5em #fff, -2em 2em 0 -0.5em #fff,
      -3em 0 0 -0.5em #fff, -2em -2em 0 -0.5em #fff;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 0 #fff, 3em 0 0 0.2em #fff,
      2em 2em 0 0 #fff, 0 3em 0 -0.5em #fff, -2em 2em 0 -0.5em #fff,
      -3em 0 0 -0.5em #fff, -2em -2em 0 -0.5em #fff;
  }
  37.5% {
    box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 -0.5em #fff, 3em 0 0 0 #fff,
      2em 2em 0 0.2em #fff, 0 3em 0 0 #fff, -2em 2em 0 -0.5em #fff,
      -3em 0 0 -0.5em #fff, -2em -2em 0 -0.5em #fff;
  }
  50% {
    box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 -0.5em #fff,
      3em 0 0 -0.5em #fff, 2em 2em 0 0 #fff, 0 3em 0 0.2em #fff,
      -2em 2em 0 0 #fff, -3em 0 0 -0.5em #fff, -2em -2em 0 -0.5em #fff;
  }
  62.5% {
    box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 -0.5em #fff,
      3em 0 0 -0.5em #fff, 2em 2em 0 -0.5em #fff, 0 3em 0 0 #fff,
      -2em 2em 0 0.2em #fff, -3em 0 0 0 #fff, -2em -2em 0 -0.5em #fff;
  }
  75% {
    box-shadow: 0 -3em 0 -0.5em #fff, 2em -2em 0 -0.5em #fff,
      3em 0 0 -0.5em #fff, 2em 2em 0 -0.5em #fff, 0 3em 0 -0.5em #fff,
      -2em 2em 0 0 #fff, -3em 0 0 0.2em #fff, -2em -2em 0 0 #fff;
  }
  87.5% {
    box-shadow: 0 -3em 0 0 #fff, 2em -2em 0 -0.5em #fff, 3em 0 0 -0.5em #fff,
      2em 2em 0 -0.5em #fff, 0 3em 0 -0.5em #fff, -2em 2em 0 0 #fff,
      -3em 0 0 0 #fff, -2em -2em 0 0.2em #fff;
  }
  100% {
    box-shadow: 0 -3em 0 0.2em #fff, 2em -2em 0 0 #fff, 3em 0 0 -0.5em #fff,
      2em 2em 0 -0.5em #fff, 0 3em 0 -0.5em #fff, -2em 2em 0 -0.5em #fff,
      -3em 0 0 -0.5em #fff, -2em -2em 0 0 #fff;
  }
}
</style>